<script setup lang="ts">
import { switchNavBarTheme } from '@/utils/common';
import { onLoad } from '@dcloudio/uni-app'
import { getRewardInfoAPI } from "@/api/reward";
import {reactive, ref} from "vue";
import type {RewardVO} from "@/types/reward";
import {RewardStatus} from "@/types/constants";

const orderNumber = ref<number>(3)
const rewardList = reactive<RewardVO[]>([])
onLoad(async () => {
  switchNavBarTheme()
  const res = await getRewardInfoAPI()
  if (res.code === 200) Object.assign(rewardList, res.data)
})
</script>

<template>
  <view class="content">
    <view class="orderTotal">本月已完成订单数量：{{ orderNumber }}</view>
    <view v-for="item in rewardList">
      <view class="title">{{ item.name }}</view>
      <wd-steps align-center>
        <wd-step :title="'+' + item.rewardOneAmount + '元'" :description="'当月完成' + item.rewardOneOrderNumber + '单'" />
        <wd-step :title="'+' + item.rewardTwoAmount + '元'" :description="'当月完成' + item.rewardTwoOrderNumber + '单'" />
        <wd-step :title="'+' + item.rewardThreeAmount + '元'" :description="'当月完成' + item.rewardThreeOrderNumber + '单'" />
      </wd-steps>
      <view class="button">
        <view class="button-item">
          <wd-button size="small" :disabled="item.rewardOneOrderNumber > orderNumber">
            {{ item.rewardOneOrderNumber > orderNumber ? '未完成' : (item.rewardOneStatus === RewardStatus.NOT_RECEIVE ? '领取' : '已领取') }}
          </wd-button>
        </view>
        <view class="button-item">
          <wd-button size="small" :disabled="item.rewardTwoOrderNumber > orderNumber">
            {{ item.rewardTwoOrderNumber > orderNumber ? '未完成' : (item.rewardTwoStatus === RewardStatus.NOT_RECEIVE ? '领取' : '已领取') }}
          </wd-button>
        </view>
        <view class="button-item">
          <wd-button size="small" :disabled="item.rewardThreeOrderNumber > orderNumber">
            {{ item.rewardThreeOrderNumber > orderNumber ? '未完成' : (item.rewardThreeStatus === RewardStatus.NOT_RECEIVE ? '未领取' : '已领取') }}
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.content {
  width: 94%;
  position: relative;
  top: 30rpx;
  margin-left: 3%;
  background-color: var(--front-color);
  padding: 50rpx 0;
  .orderTotal {
    margin: 0 0 0 50rpx;
  }
  .title {
    display: flex;
    justify-content: center;
    margin-top: 70rpx;
    margin-bottom: 50rpx;
  }
  .button {
    display: flex;
    margin-top: 30rpx;
    .button-item {
      display: flex;
      flex: 1;
    }
  }
}
</style>
